<template>
  <el-drawer
    class="personal-center__drawer"
    :model-value="visible"
    title="偏好设置"
    @closed="handleClosed"
  >
    <template #default>
      <div class="grid grid-cols-3 w-full overflow-hidden gap-6 items-start">
        <div
          v-for="theme in themes"
          :key="theme.id"
          class="flex overflow-hidden items-center"
        >
          <theme-thumbnail
            :active="activeTheme"
            :theme="theme"
            @click="handleChangeTheme(theme.id)"
          />
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { themes } from '@/config'

import ThemeThumbnail from './ThemeThumbnail.vue'

interface IProps {
  visible: boolean
}
interface IEmit {
  (event: 'change-theme', id: string | number): void
  (event: 'update:visible', visible: boolean): void
}
const emit = defineEmits<IEmit>()

withDefaults(defineProps<IProps>(), {})

const customState = reactive({
  visible: false
})

const activeTheme = ''

const handleChangeTheme = (id: string | number) => {
  emit('change-theme', id)
}

const handleClosed = () => {
  customState.visible = false
  emit('update:visible', false)
}
</script>

<style scoped></style>
